<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画布-心</title>
</head>
<body onload="draw('myCanvas')">

<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:40%;left:40%"></canvas>

<script type="text/javascript">

    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(75, 40);
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
        ctx.bezierCurveTo(20, 25, 22, 62.5, 22, 55);
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
        ctx.bezierCurveTo(110, 102, 130, 80, 128, 55);
        ctx.bezierCurveTo(128, 55, 130, 25, 100, 25);
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
        var gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 150);
        gradient.addColorStop(0, "rgba(244,28,285,0.5)");
        gradient.addColorStop(1, "rgba(255,255,255,1)");
        ctx.fillStyle = gradient;
        ctx.fill();
    }
</script>
</body>
</html>